<template>
  <div class="dateBox">
    <div class="time">{{ time }}</div>
    <div class="date">{{ date }}</div>
  </div>
</template>

<script>
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "clock",
  data() {
    return {
      date: null,
      time: null
    }
  },
  mounted() {
    const clock = setInterval(() => {
      this.date = this.getToday().date
      this.time = this.getToday().time
    }, 50)
    // 通过$once来监听定时器，在beforeDestroy钩子可以被清除。
    this.$once('hook:beforeDestroy', () => {
      clearInterval(clock)
    })
  },
  methods: {
    // 日期时间格式化——获取当前日期时间，格式化为 2021/08/30 和 15:35:06
    getToday() {
      let datas = new Date()
      let on1 = '/'
      let on2 = ':'
      let onY = datas.getFullYear() // 年
      let onM = datas.getMonth() + 1 // 月
      let onD = datas.getDate() // 日
      let onS = datas.getHours() // 时
      let onF = datas.getMinutes() // 分
      let onN = datas.getSeconds() // 秒

      if (onM >= 1 && onM <= 9) {
        // 月
        onM = '0' + onM
      }
      if (onD >= 1 && onD <= 9) {
        // 日
        onD = '0' + onD
      }
      if (onS >= 0 && onS <= 9) {
        // 时
        onS = '0' + onS
      }
      if (onF >= 0 && onF <= 9) {
        // 分
        onF = '0' + onF
      }
      if (onN >= 0 && onN <= 9) {
        // 秒
        onN = '0' + onN
      }

      return {
        date: onY + on1 + onM + on1 + onD,
        time: onS + on2 + onF + on2 + onN
      }
    }

  }
}
</script>

<style lang="scss" scoped>
.dateBox {
  background: #121747;
  border: 1px solid #121747;
  display: flex;
  align-items: center;
  //justify-content:center;
  //position: absolute;
  top: 70px;
  left: 50px;
  padding: 0 16px;
  height: 88px;
}

.date {
  font-size: 28px;
  color: #8ac9ff;
  margin-left: 15px;
}

.time {
  font-size: 48px;
  color: #ffffff;
}
</style>
